<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/montage-serialization">
        {
            "owner": {
                "values": {
                    "element": {"#": "main"},
                    "promiseButton": {"@": "promiseButton"}
                },
                "listeners":[
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    },
                    {
                        "type": "longAction",
                        "listener": {"@": "owner"}
                    }
                ]
            },

            "custom": {
                "prototype": "montage/ui/button.reel",
                "values": {
                    "element": {"#": "button-custom"},
                    "label": "custom"
                }
            },

            "input": {
                "prototype": "montage/ui/button.reel",
                "values": {
                    "element": {"#": "button-input"},
                    "label": "input"
                }
            },

            "native": {
                "prototype": "montage/ui/button.reel",
                "values": {
                    "element": {"#": "button-native"},
                    "label": "native"
                }
            },

            "promiseButton": {
                "prototype": "montage/ui/button.reel",
                "values": {
                    "element": {"#": "button-promise"},
                    "label": "promise"
                }
            },

            "text": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "text"},
                    "value": {"<-": "@owner.message || 'please hit a button'"}
                }
            }
        }
    </script>
</head>
<body>
    <div data-montage-id="main" class="Main">
        <header>Button Sample</header>
        <section class="buttons">
            <div data-montage-id="button-custom" class="button custom"></div>
            <input data-montage-id="button-input" type="button" class="button native"></input>
            <button data-montage-id="button-native" class="button native"></button>
            <button data-montage-id="button-promise" class="button"></button>
            <span data-montage-id="text"></span>
            <br>
            <button>Bare Button</button>

        </section>
    </div>
</body>
</html>
